//1. 引入vue和vuex
import Vue from "vue";
import Vuex from "vuex";

//2. 使用vuex插件
Vue.use(Vuex);

//3.实例化一个vuex仓库,并暴露
//4. 给仓库传入配置(state mutations actions getters modules)
export default new Vuex.Store({
  state: {
    count: 1,
    num: 0,
  },
  /*
   * 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
   * Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
   * mutations函数会接受 state 作为第一个参数
   */
  mutations: {
    increment(state){
        state.count++;
    },
    decrement(state){
        state.count--;
    },
      //你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）,在mutations方法中第二个参数接受
      incrementN(state,payload){
        state.count+=payload.n
      },
      incrementWait(state){
        setTimeout(()=>{
          state.count++
        },2000)
      }
  },
  actions:{
     /* 
      actions中方法的任务1. 执行异步操作  2. 提交mutations更新state
      actions的方法接受一个阉割版的store作为参数,我们可以使用store上的commit方法提交mutation
      actions的方法接受的第二个参数是dispatch时候传递的参数
    */
      incrementNWait(store, n) {
        setTimeout(() => {
          //提交mutation的时候,需要遵守payload写法
          store.commit("incrementN", { n: n });
        }, 2000);
  }
},
getters:{
  douleCount(state){
    return state.count *2
  }
}
 
});